<template>
  <page-scroll :footer="false">
    <template #bg>
      <div class="bg"></div>
    </template>
    <template #header>
      <gltitle
        :title="title"
        :is_name="true"
        :is_back="true"
        :is_lang="false"
        :is_kf="false"
      ></gltitle>
    </template>
    <template #content>
      <div class="container">
        <div class="empty db rel" style="z-index: 3" v-show="emptyShow">
          <div class="flexs">
            <van-empty
              class="custom-image"
              :image="require('../../assets/images/none.png')"
              :description="$t('load.doc1')"
            />
          </div>
        </div>

        <div class="videoList">
          <van-pull-refresh
            v-model="refreshing"
            :success-text="$t('load.refreshed')"
            @refresh="onRefresh(0)"
            head-height="200"
            v-if="!emptyShow"
          >
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="$t('load.no_more')"
              :loading-text="$t('load.loading')"
              @load="onLoad"
              :immediate-check="check"
            >
              <ul class="list">
                <li
                  v-for="(item, k) in datalist"
                  :key="k"
                  @click="checkLevel(item)"
                >
                  <div class="pic" :data-text="item.hasWatch?$t('page.doc4'):$t('page4.doc6')">
                    <img v-lazy="item.coverUrl" alt="" />
                    <!-- <div class="abs">
                        <div class="v"><img src="../../assets/images/ico_home6.png" alt="">
                            {{$t('page3.doc103',{n1:item.readCount})}}
                        </div>
                        <div class="time">{{item.duration}}</div>
                    </div> -->
<!--                    <div class="str">-->
<!--                      <span v-if="!item.hasWatch">{{ $t("page4.doc6") }}</span>-->
<!--                      <span v-else>{{ $t("page.doc4") }}</span>-->
<!--                    </div>-->
                  </div>
                  <!-- <div class="info">
                      <div class="title line_2x">
                          {{item.name}}
                      </div>
                      <div class="pingfen flex">
                          <div class="str flex1">
                              <van-rate v-model="item.score"
                                        allow-half void-icon="star"
                                        void-color="#D9D9D9"
                                        color="#FFC837"
                              />
                          </div>
                          <div class="s">
                              {{$t('page3.doc104',{n1:item.score})}}
                          </div>
                      </div>

                      <button>{{$t('page3.doc105')}}</button>
                  </div> -->
                </li>
              </ul>
            </van-list>
          </van-pull-refresh>
        </div>
      </div>
    </template>
  </page-scroll>
</template>

<script>
export default {
  data() {
    return {
      title: this.$route.query.title,
      datalist: [],
      loading: false,
      finished: false,

      totalPage: "",
      pageSize: 0,
      refreshing: false,
      emptyShow: false,
      datalistNum: 0,
      check: true,
      cid: this.$route.query.id,
      levelData: [],
    };
  },
  computed: {
    userData() {
      return this.$store.state.userData;
    },
  },
  mounted() {
    document.title = this.title;
    this.getLevel();
  },
  methods: {
    checkLevel(item) {
      // if (this.userData.level > -1) {
      //   let levelInfo = {}
      //   for (let i = 0; i < this.levelData.length; i++) {
      //     if (this.levelData[i].level == this.userData.level) {
      //       levelInfo = this.levelData[i]
      //       break;
      //     }
      //   }
      // if (levelInfo.incomeDailyCount - levelInfo.incomeDailyUseCount > 0) {
      this.path_url("/home/vrdetails?id=" + item.movieId);
      // } else {
      //   this.$toast(this.$t('new.doc51'))
      // }
      // } else {
      //   this.$toast(this.$t('new.doc50'))
      // }
    },
    getLevel() {
      this.$post(this.URL.wallet.level, {}).then((res) => {
        if (res.code == 0) {
          this.levelData = res.data;
        } else {
          this.$toast(res.message);
        }
      });
    },
    onLoad() {
      if (this.refreshing) {
        this.datalist = [];
        this.refreshing = false;
      }
      this.getlist();
    },
    onRefresh() {
      this.finished = false;
      this.loading = true;

      this.pageSize = 0;
      this.totalPage = "";

      this.onLoad();
    },

    getlist() {
      this.pageSize = this.pageSize + 1;

      if (this.pageIndex == this.totalPage) {
        this.loading = false;
        this.finished = true;

        return;
      }

      this.$post(this.URL.home.category2, {
        categoryId: this.cid,
        page: this.pageSize,
        movieCount: 10,
      }).then((res) => {
        if (res.code == 0) {
          if (res.code == 2001) {
            this.loading = true;
            this.finished = false;
            this.emptyShow = true;
            return;
          }
          this.totalPage = res.data.page.totalPage;
          this.pageIndex = res.data.page.index;

          this.datalistNum = res.data.page.count;

          let initData = res.data.list;
          this.datalist.push(...initData);
          this.loading = false;
        } else {
          this.$toast(res.message);
        }
      });
    },

    path_url(url) {
      this.$router.push({
        path: url,
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
.videoList {
  .list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;

    li {
      width: 31.4%;
      margin-right: 0rem;
    }
  }
}

.pic{
  border-radius: 0.2rem;
  position: relative;
  &::after{
    content: attr(data-text);
    position: absolute;
    width: 0.8rem;
    top: 0;
    right: 0;
    background: var(--color-orange-77, #FFDF89);
    color: #000000;
    font-size: 0.18rem;
    text-align: center;
    border-radius: 0 0.2rem 0 0.12rem;
    font-weight: bold;
  }
}
</style>
